<template>
  <el-scrollbar class="app-tree">
    <el-tree :data="treeData"
    node-key="id"
    :default-expanded-keys="defaultExdKeys"
    :props="defaultProps"
    :expand-on-click-node="false"
    @node-click="handleNodeClick"></el-tree>
  </el-scrollbar>
</template>
<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    },
    native: Boolean,
    wrapStyle: {},
    wrapClass: {},
    viewClass: {},
    viewStyle: {},
    noresize: true, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {
      type: String,
      default: 'div'
    }
  },
  data () {
    return {
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      this.$emit('appTreeClick', data)
    }
  },
  computed: {
    defaultExdKeys: function () {
      if (this.treeData && this.treeData instanceof Array && this.treeData.length > 0) {
        let firstNode = this.treeData[0]
        return [firstNode.id]
      }
    }
  }
}
</script>
<style scoped>
.app-tree {
  height: 100%;
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #f1f1f1;
  border-left: none;
  border-bottom: none;
  box-shadow: 1px 0px 3px rgba(0,0,0,0.1);
  background: #fff;
}
.app-tree >>> .el-tree-node__content {
  line-height: 35px;
  height: 35px;
  border-bottom: 1px solid #F1F1F1;
}
.app-tree >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
